<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
            padding: 0px;
            margin: 0px;
            text-decoration: none;
        }
        .a{
            height: 80px;
            background:red;
            margin-bottom: 25px;

        }
        .a1{
            float:left;
            margin:0px 0px 0px 45px;
            background-size: auto;
            background: pink;
            width: 325px;
            height: 80px;
        }
        p {
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }
        .a21,.a22,.a23{
         float: left;
         width: 150px;
         text-align: center;
        cursor: pointer;
        font-size: 20px;
        line-height: 1.28571;
        
        }
        .a21:hover{
            text-decoration: underline orange;
            color:orange;
        }
        .a22:hover{
            text-decoration: underline orange;
            color:orange;
        }
        .a23:hover{
            text-decoration: underline orange;
            color:orange;
        }
        .a3{
            float:right;
            margin:0px 80px 10px 0px;
            background:pink;
            height: 40px;
            width: 40px;
        }
        .c{
            height: 50px;
            background:orangered;
            width:100%;
        }
        .c21{
            text-align: center;
            font-size:35px;
            color:orange;
        }
        .b{
            height: 384px;
            width: 1200px;
            background:red;  
            margin:30px auto 10px auto;         
        }
        .b1{
            width: 220px;
            height: 384px;
            background:pink;
            float:left;
        }
        .b12{
            font-size: 18px;
            
        }
        .b2{
            height: 384px;
            width: 600px;
            background:red;
            float:left;
            margin:0px 18px 10px 18px;

        }
        .b21{
            height: 253px;
            width: 600px;
            margin-bottom:18px;
            background:pink;
        }
        .b22{
            height: 112px;
            width: 600px;
            background:pink;

        }
        .b3{
            height: 384px;
            width: 344px;
            background:red;
            float:right;
        }
        .b31{
            width: 346px;
            height: 132px;
            background:pink;
        }
        .picture{
            background-image:url("oxhead.png");
            width: 56px;
            height: 56px;
            float:left;
            margin:20px auto auto 20px;
        }
        .p1{
            float:left;
            margin:20px auto auto 20px;
        }
        .p2{
            float:left;
            font-size: 10px;
            
        }
        
        .b32{
            width: 346px;
            height: 96px;
            background:pink;

        }
        .b33{
            width: 346px;
            height: 85px;
            background:white;
        }
        .b34{
            width: 346px;
            height: 72px;
            background:white;
        }
        .b341 {
            text-decoration:  orange;
            color:orange;
            margin:0px 20px;
        }
        .b331{
            color:grey;
            margin: 0px 9px; 
        }
        .d{
            width: 1200px;
            height: 130px;
            margin:0px auto 0px auto;
            background:red;

        }
        span{
            font-size: 18px;
        }
       .k{
           margin:0px 12px;
       }
       
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            <img src="1688.png" alt="" height="84px" width="325px">
        </div>
        <p class="a21">找资源</p>
        <p class="a22">找工厂</p>
        <p class="a23">找工业品</p>
        <div class="a3">
            <img src="3.png" alt="" width="80px" height="80px">
        </div>
    </div>   
    
    <div class="c">
        <p class="c21">精美商品，淘宝实体店进货指南</p>
    </div>
    <div class="b">
        <div class="b1">
            <span>品类市场</span>
            <br></br>
            <span>女装 男装 内衣</span>
            <br></br>
            <span>配饰 鞋靴 箱包</span>
            <br></br>
            <span>运动服饰 运动装备</span>
            <br></br>
            <span>童装 母婴 玩具</span>
            <br></br>
            <span>家居百货 家纺家饰</span>
            <br></br>
            <span>家装建材 灯饰照明</span>
            <br></br>
            <span>办公援交 宠物园艺</span>
            <br></br>
            <span>食品酒水 餐饮食鲜</span>
            <br></br>
            <span>美容化妆 个护家清</span>
            <br></br>
            <span>数码 家电 汽车用品</span>
            <br></br>
        </div>
        <div class="b2">
            <div class="b21">
                <img src="twogirl.png" alt="" height="253px" width="600px">
            </div>
            <div class="b22">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <img src="trick.png" alt="" margin-left="12px">
                <br>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                <span class="k">厂货通</span>
                
            </div>
        </div>
        <div class="b23">
            
        </div>
        <div class="b3">
            <div class="b31">
              <div class="picture"></div>
                <p class="p1">晚上好，欢迎来到1688</p>
                
                <p class="p2">填写我的采购需求</p>
                
               
            </div>
            <div class="b32">
                <img src="goods.png" alt="" width="346" height="96px">
            </div>
            <div class="b33">
                    <span class="b331">发付款</span>
                    <span class="b331" >待收货</span>
                    <span class="b331" >代发货</span>
                    <span class="b331">待卖家同意</span>
                
                
            </div>
            <div class="b34">
                
                <span class="b341">平台公告</span>
                <span class="b341">最新规则</span>
                <span class="b341">商人社区</span>
            </div>
        </div>
    </div>
    <div class="d">
        <img src="discount.png" alt="" width="1200px" height="130px">
    </div>
</body>
</html>